import React, { Component } from 'react';
import { Flex, Carousel } from 'antd-mobile';
import { hot } from './HotInformation.less';


export default class HotInformation extends Component {
    constructor(props){
        super(props)
        this.state={
            num:0
        };
        this.timer=null;
    }

    componentDidMount() {
        // simulate img loading
        this.timer =  setTimeout(() => {
            this.setState({
                num:this.state.num+1
            });
        }, 1000);
    }

    componentWillUnmount(){
        //console.log(2);
        if(this.timer!=null){
            clearTimeout(this.timer);
        }
    }

    render() {
        const { contentList, style } = this.props;

        return (
          <div style={style} className={hot}>
              <Flex className="hot_body" justify="center">
                  <div className="hot_title"></div>
                  <Flex.Item className="text-overflow-hidden" style={{ color:"#656565" }}>
                      <Carousel className="my-carousel"
                                vertical
                                dots={false}
                                selectedIndex={this.state.num}
                                dragging={false}
                                swiping={false}
                                autoplay={true}
                                infinite
                                speed={200}
                                autoplayInterval={1000}
                               // resetAutoplay={false}
                      >
                          {
                              contentList.map((v,i,a)=>{
                                  return <div key={i}>{v.title}</div>
                              })
                          }
                      </Carousel>
                  </Flex.Item>
                  <div className="line"></div>
                  <div className="hot_more">更多</div>
              </Flex>
          </div>
            )
    }
}

